<template>
  <div class="mod-user">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.keywords" placeholder="账号、名称" clearable style="width:200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.userType" placeholder="用户类型" :value="dataForm.userType">
          <el-option
            v-for="type in typeNameList"
            :key="type.val"
            :label="type.label"
            :value="type.val">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
        <el-date-picker
          value-format = "yyyy-MM-dd HH:mm:ss"
          v-model="dataForm.time"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="起始时间">
				<el-date-picker
          v-model="dataForm.startTime"
          type="datetime"
          value-format = "yyyy-MM-dd HH:mm:ss"
          placeholder="起始时间">
			  </el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间">
				<el-date-picker
          v-model="dataForm.endTime"
          type="datetime"
          value-format = "yyyy-MM-dd HH:mm:ss"
          placeholder="结束时间">
			  </el-date-picker>
			</el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.province" placeholder="请选择省" :value="dataForm.province" filterable
                   @change="querySubordinateList(dataForm.province, 1)">
          <el-option
            v-for="type in provinceList"
            :key="type.id"
            :label="type.areaName"
            :value="type.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.city" placeholder="请选择市" :value="dataForm.city" filterable v-if="dataForm.province !== ''"
                   @change="querySubordinateList(dataForm.city, 2)">
          <el-option
            v-for="type in cityList"
            :key="type.id"
            :label="type.areaName"
            :value="type.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.town" placeholder="请选择镇" :value="dataForm.town" filterable v-if="dataForm.city !== ''"
                   @change="querySubordinateList(dataForm.town, 3)">
          <el-option
            v-for="type in townList"
            :key="type.id"
            :label="type.areaName"
            :value="type.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.area" placeholder="请选择区" :value="dataForm.area" filterable v-if="dataForm.town !== '' && areaList.length !== 0">
          <el-option
            v-for="type in areaList"
            :key="type.id"
            :label="type.areaName"
            :value="type.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()" type="primary" plain>查询</el-button>
        <el-button @click="
          dataForm.keywords = '',
          dataForm.userId = '',
          dataForm.userType = '',
          dataForm.city = ''
          dataForm.town = ''
          dataForm.area = ''
          dataForm.province = ''
          dataForm.time = new Date()
        getDataList()">重置</el-button>
        <el-button icon="el-icon-download" type="primary" @click="excel()">导出</el-button>
        <el-button type="primary" @click="addHandle()">新增运营商</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50px">
      </el-table-column>
      <!-- <el-table-column
        prop="id"
        header-align="center"
        align="center"
        width="80"
        label="ID">
      </el-table-column> -->
      <el-table-column
        prop="userName"
        header-align="center"
        width="300px"
        label="会员信息">
        <template  slot-scope="scope">
          <div>
              <img class="image1" v-if="scope.row.headimg != null && scope.row.headimg !== '' && scope.row.headimg.length > 30" :src="scope.row.headimg"/>
              <img class="image1" v-if="scope.row.headimg != null && scope.row.headimg !== '' && scope.row.headimg.length < 30" :src="'https://image.yilianbaihui.cn/consumer/' + scope.row.headimg"/>
              <img class="image1" v-if="scope.row.headimg == null" src="https://image.yilianbaihui.cn/consumer/user/1557987780085.png"/>
              <ul class="jx_ul-info-list">
                <li style="list-style-type:none;"><label v-if="scope.row.ww != null">昵称：</label>{{scope.row.ww}}</li>
                <li style="list-style-type:none;"><label>用户名：</label>{{scope.row.userName}}</li>
                <li style="list-style-type:none;"><label>手机：</label>{{scope.row.mobile}}</li>
                <!-- <li style="list-style-type:none;"><label>ID：</label>{{scope.row.id}}</li> -->
              </ul>
          </div>
          <!-- <el-tooltip class="item" effect="dark" :content="scope.row.addTime" placement="top">
            <span class="characters">{{scope.row.addTime}}</span>
          </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="userType"
        header-align="center"
        align="center"
        label="会员类型"
        width="80px">
        <template slot-scope="scope">
            <el-tag type="primary" style="margin-left: -10px; width: 79px"
                    disable-transitions>{{memberType[scope.row.userType]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="integral"
        header-align="center"
        align="center"
        label="积分余额"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="commissionMoney"
        header-align="center"
        align="center"
        label="推广余额"
        width="80px">
        <template slot-scope="scope">
          <span>￥{{scope.row.commissionMoney}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="trueName"
        header-align="center"
        align="center"
        label="会员名称">
      </el-table-column>
      <el-table-column
        prop="userName"
        header-align="center"
        align="center"
        label="会员账号">
        <template  slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.userName" placement="top">
            <span class="characters">{{scope.row.userName}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="realName"
        header-align="center"
        align="center"
        label="会员负责人">
      </el-table-column> -->

      <!-- <el-table-column
        prop="report"
        header-align="center"
        align="center"
        width="100"
        label="超级玩家">
        <template slot-scope="scope">
          <el-button v-if="scope.row.report===0" type="primary" round size="mini" @click="superUserOpen(scope.row.id)">开通</el-button>
          <el-tag v-if="scope.row.report===1"  size="mini">已开通</el-tag> -->
          <!--<el-switch :value="scope.row.report"> </el-switch>{{scope.row.report}}-->
        <!-- </template>
      </el-table-column> -->

      <!-- <el-table-column
        prop="notExtract"
        header-align="center"
        align="center"
        width="70"
        label="未提现">
      </el-table-column>
      <el-table-column
        prop="yesExtract"
        header-align="center"
        align="center"
        width="70"
        label="已提现">
      </el-table-column>
      <el-table-column
        prop="recommendMoney"
        header-align="center"
        align="center"
        width="90"
        label="推广余额">
      </el-table-column> -->
      <el-table-column
        prop="panUserName"
        header-align="center"
        align="center"
        label="上级账号">
        <template  slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.panUserName" placement="top">
            <span class="characters">{{scope.row.panUserName}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="panUserType"
        header-align="center"
        align="center"
        label="上级信息">
        <template  slot-scope="scope">
          <div style="text-align: left">
            <el-tooltip class="item" effect="dark" :content="memberType[scope.row.panUserType]" placement="top">
              <span class="characters" style="margin-left: 20px">类型： {{memberType[scope.row.panUserType]}}</span>
            </el-tooltip>
          </div>
          <div style="text-align: left">
            <span class="characters" style="margin-left: 20px">名称： {{scope.row.panUserTrueName}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        header-align="center"
        label="注册&登录">
        <template slot-scope="scope">
          <ul class="time">
            <li style="list-style-type:none;"><label>注册时间：</label>{{scope.row.addTime}}</li>
            <li style="list-style-type:none;"><label>最后登录：</label>{{scope.row.lastLoginDate}}</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        header-align="center"
        align="center"
        label="状态"
        width="80px">
        <template slot-scope="scope">
          <span v-if="scope.row.userType === 1 || scope.row.userType === 3 || scope.row.userType === 4 || scope.row.userType === 7">
            <el-tag v-if="scope.row.status === 0" ><span style="color: #006400">正常</span></el-tag>
            <el-tag v-if="scope.row.status === 1"><span  style="color: #E6A23C">异常</span></el-tag>
            <el-tag v-if="scope.row.status === 2"><span  style="color: #E6A23C">不通过</span></el-tag>
            <el-tag v-if="scope.row.status === 5"><span  style="color: #F56C6C">锁定</span></el-tag>
            <el-tag v-if="scope.row.status === 7"><span  style="color: #E6A23C">未登录</span></el-tag>
          </span>
          <span v-if="scope.row.userType === 2 || scope.row.userType === 5 || scope.row.userType === 6 || scope.row.userType === 8">
            <el-tag v-if="scope.row.status === 0" ><span style="color: #E6A23C">未审核</span></el-tag>
            <el-tag v-if="scope.row.status === 1"><span style="color: #2F4F4F">通过</span></el-tag>
            <el-tag v-if="scope.row.status === 2"><span style="color: #E6A23C">未通过</span></el-tag>
            <el-tag v-if="scope.row.status === 3"><span style="color: #F56C6C">资料待完善</span></el-tag>
            <el-tag v-if="scope.row.status === 5"><span style="color: #F56C6C">锁定</span></el-tag>
          </span>
        </template>
      </el-table-column>
      <!--<el-table-column
        prop="panUserTrueName"
        header-align="center"
        align="center"
        label="上级名称">
        <template  slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.panUserTrueName" placement="top">
            <span class="characters">{{scope.row.panUserTrueName}}</span>
          </el-tooltip>
        </template>
      </el-table-column>-->
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作"
       width="260px">
        <template slot-scope="scope">
          <ul class="ui">
            <li>
              <div @mouseenter="enter(scope.row.id)" @mouseleave="leave()">
                <button class="dropbtn">账户明细</button>
                <div class="dropdown-content" v-show="show && scope.row.id == current">
                  <button style="font-size: 6px;border: none;" @click="information(scope.row.userName)">余额变动</button>
                  <button style="font-size: 6px;border: none;" @click="informationIntegral(scope.row.userName)">积分变动</button>
                  <button style="font-size: 6px;border: none;" @click="extractMoneyDetailHandle(scope.row.id)">提现明细</button>
                </div>
              </div>

            </li>
            <li>
              <el-button type="text" size="small" @click="selectGoodsBrowse(scope.row.id)">查看足迹</el-button>
            </li>
            <li>
              <el-button type="text" size="small" v-if="isAuth('balanceLog:getCommissionMoneyByUserName')" @click="balanceAdjustment(scope.row.userName)">余额调整</el-button>
            </li>
            <li>
              <el-button v-if="isAuth('member:user:modifyById')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            </li>
          </ul>
          <ul class="ui">
            <li>
              <el-button type="text" size="small" v-show="scope.row.status != 5" @click="locking(scope.row.id, 1, scope.row.userType)">状态锁定</el-button>
              <el-button type="text" size="small" v-show="scope.row.status === 5" @click="locking(scope.row.id, 0, scope.row.userType)">状态解锁</el-button>
            </li>
            <li>
              <el-button type="text" size="small" @click="resetPassword(scope.row.id)">重置密码</el-button>
            </li>
            <li>
              <el-button type="text" size="small" @click="merchantIncomeHandle(scope.row.id)" v-if="scope.row.userType === 2 ||  scope.row.userType === 5 || scope.row.userType === 6 || scope.row.userType === 8">商家收益</el-button>
            </li>
            <li>
              <!--<el-button type="text" size="small" v-if="isAuth('revenueLog:modifyShoppingVoucher')" @click="integralAdjustment(scope.row.userName)">积分调整</el-button>-->
            </li>
          </ul>
          <!--<el-button type="text" size="small" v-if="isAuth('member:user:modifyById')" @click="locking(scope.row.id, 1, scope.row.userType)">设置锁定</el-button>-->
          <!-- <el-button type="text" size="small" @click="extractMoneyDetailHandle(scope.row.id)">提现明细</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <extract-money-details v-if="extractMoneyDetailsVisible" ref="extractMoneyDetails" @refreshDataList="getDataList"></extract-money-details>
    <merchant-income v-if="merchantIncomeVisible" ref="merchantIncome" @refreshDataList="getDataList"></merchant-income>
    <goods-browse v-if="browseVisible" ref="goodsBrowse" @refreshDataList="getDataList"></goods-browse>
    <add-operator v-if="addOrUpdateVisible" ref="addOperator" @refreshDataList="getDataList"></add-operator>
    <information v-if="informationVisible" ref="information" @refreshDataList="getDataList"></information>
    <information-integral v-if="informationIntegralVisible" ref="informationIntegral" @refreshDataList="getDataList"></information-integral>
    <balance-adjustment v-if="balanceAdjustmentVisible" ref="balanceAdjustment" @refreshDataList="getDataList"></balance-adjustment>
    <!--<integral-adjustment v-if="integralAdjustmentVisible" ref="integralAdjustment" @refreshDataList="getDataList"></integral-adjustment>-->
  </div>
</template>

<script>
  import GoodsBrowse from './user-goodsbrowse'
  import AddOrUpdate from './user-add-or-update'
  import ExtractMoneyDetails from './extract-money-details'
  import MerchantIncome from './merchant-income'
  import {typeName, typeNameList} from '@/utils/memberType'
  import AddOperator from './add-operator'
  import Information from './user-balancelog'
  import InformationIntegral from './user-revenue-log'
  import BalanceAdjustment from '../balancelog/shoppingbalancelog-update'
  /* import IntegralAdjustment from './update-shopping-voucher' */
export default {
    data () {
      return {
        dataForm: {
          userType: '',
          userId: '',
          city: '',
          town: '',
          area: '',
          province: '',
          // time: new Date(),
          startTime: '',
          endTime: '',
          keywords: '',
          status: ''
        },
        show: false,
        current: 0,
        provinceList: [],
        cityList: [],
        townList: [],
        areaList: [],
        typeNameList: typeNameList,
        memberType: typeName,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        extractMoneyDetailsVisible: false,
        merchantIncomeVisible: false,
        browseVisible: false,
        informationVisible: false,
        informationIntegralVisible: false,
        balanceAdjustmentVisible: false,
        /* integralAdjustmentVisible: false */
      }
    },
    components: {
      GoodsBrowse,
      AddOrUpdate,
      ExtractMoneyDetails,
      MerchantIncome,
      AddOperator,
      Information,
      InformationIntegral,
      BalanceAdjustment,
      /*IntegralAdjustment*/
    },
    activated () {
      this.getDataList()
    },
    methods: {
      enter (id) {
        this.show = true
        this.current = id
      },
      leave () {
        this.show = false
        this.current = null
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true

        this.$http({
          url: this.$http.adornUrl('/member/area/queryProvinceList'),
          method: 'post'
        }).then(({data}) => {
          this.provinceList = data.data
        })
        this.$http({
          url: this.$http.adornUrl('/member/user/queryUserList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex - 1,
            'limit': this.pageSize,
            'keywords': this.dataForm.keywords,
            'userType': this.dataForm.userType === 0 ? undefined : this.dataForm.userType,
            'areaId': this.dataForm.city || this.dataForm.town || this.dataForm.area || this.dataForm.province || undefined,
            'lastStart': this.dataForm.startTime,
            'lastEnd': this.dataForm.endTime
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
          debugger
          console.log(this.dataList[0].ww)
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 提现明细
      extractMoneyDetailHandle (id) {
        this.extractMoneyDetailsVisible = true
        this.$nextTick(() => {
          this.$refs.extractMoneyDetails.getDataList(id)
        })
      },
      // 商家收益
      merchantIncomeHandle (id) {
        debugger
        this.merchantIncomeVisible = true
        this.$nextTick(() => {
          this.$refs.merchantIncome.getDataList(id)
        })
      },
      // 查看足迹
      selectGoodsBrowse (id) {
        this.browseVisible = true
        this.$nextTick(() => {
          this.$refs.goodsBrowse.init(id)
        })
      },
      // 账户明细
      information (userName) {
        this.informationVisible = true
        this.$nextTick(() => {
          this.$refs.information.getDataList(userName)
        })
      },
      // 积分记录
      informationIntegral (userName) {
        this.informationIntegralVisible = true
        this.$nextTick(() => {
          this.$refs.informationIntegral.getDataList(userName)
        })
      },
      // 余额变动
      balanceAdjustment (userName) {
        this.balanceAdjustmentVisible = true
        this.$nextTick(() => {
          this.$refs.balanceAdjustment.init(userName)
        })
      },
      /* integralAdjustment (userName) {
        this.integralAdjustmentVisible = true
        this.$nextTick(() => {
          this.$refs.integralAdjustment.init(userName)
        })
      }, */
      querySubordinateList (id, type) {
        this.$http({
          url: this.$http.adornUrl(`/member/area/querySubordinateList`),
          method: 'post',
          data: this.$http.adornData(id, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            if (type === 1) {
              this.cityList = data.data
            } else if (type === 2) {
              this.townList = data.data
            } else if (type === 3) {
              this.areaList = data.data
            }
          }
        })
      },
      excel () {
        window.location.href = this.$http.adornUrl(`/member/user/userExcel?token=${this.$cookie.get('token')}&userType=${this.dataForm.userType}&keywords=${this.dataForm.keywords}&province=${this.dataForm.province}&city=${this.dataForm.city}&town=${this.dataForm.town}&endTime=${this.dataForm.endTime}&startTime=${this.dataForm.startTime}`)
      },
      superUserOpen (val) {
        this.$confirm(`确定对${val}用户进行开通超级会员操作？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('请输入支付金额', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            inputPattern: /^[0-9]*[1-9][0-9]*$/,
            inputErrorMessage: '非法数据'
          }).then(({ value }) => {
            this.$http({
              url: this.$http.adornUrl(`/member/user/openNewPlayer/${val}`),
              method: 'post',
              data: this.$http.adornData(value, false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          })
        })
      },
      // 重置密码
      resetPassword (id) {
        this.$prompt('请输入要修改密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[0-9a-zA-Z]+$/,
          inputErrorMessage: '密码格式只能是数字和字母'
        }).then(({ value }) => {
          this.$http({
            url: this.$http.adornUrl(`/member/user/modifyById`),
            method: 'post',
            data: this.$http.adornData({
              'id': id,
              'password': value
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 锁定用户
      locking (id, state, userType) {
        debugger
        this.$confirm(state === 0 ? '确定解锁状态 ？' : '确定锁定状态 ？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/member/user/modifyById`),
            method: 'post',
            data: this.$http.adornData({
              'id': id,
              'state': state,
              'userType': userType,
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 新增运营商
      addHandle () {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOperator.init()
        })
      }
    }
  }
</script>
<style>
  .mod-user{
    width: 100%;
  }
  .characters{
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .jx_ul-info-list ul {
    margin:0;
    padding:0
  }
  .jx_ul-info-list li label {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
.image1{
  width:60px;
  height:60px;
  border-radius:200px;
  margin-top: 10px;
  float: left;
}
  .jx_ul-info-list {
    margin:0;
    padding:0;
    margin-left: 30px;
    margin-top: 20px;
    float: right;
  }
  .jx_ul-info-list li {
    text-align: left;
    width: 180px;
  }
.time {
  text-align:left
}
   .dropdown-content {
    display: block;
    position: absolute;
   }
   .dropdown-content button {
    color: black;
    padding: 2px 12px;
    text-decoration: none;
    display: block;
   }
   .dropdown-content button:hover {
    background-color: #f1f1f1
   }
   .dropdown-top :hover .dropdown-content {
    display: block;
   }
  .dropbtn {
    margin-top: 4px;
    margin-left: -10px;
    background-color: #17B3A3;
   }
  .ui{
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ui li {
    width: 80px;
    height: 30px;
    float: left;
  }
</style>
